<template>
  <div class="titleComponent" v-if="oItem" :style="{
      paddingTop: oItem.main.wrapperPT + 'px',
      paddingBottom: oItem.main.wrapperPB + 'px',
      paddingLeft: oItem.main.wrapperPLR + 'px',
      paddingRight: oItem.main.wrapperPLR + 'px',
    }">
    <div class="content" :style="{
      paddingTop: oItem.main.modulePT + 'px',
      paddingBottom: oItem.main.modulePB + 'px',
      paddingLeft: oItem.main.modulePLR + 'px',
      paddingRight: oItem.main.modulePLR + 'px',

      borderTopLeftRadius: oItem.main.wrapperBTR + 'px',
      borderTopRightRadius: oItem.main.wrapperBTR + 'px',
      borderBottomRightRadius: oItem.main.wrapperBBR + 'px',
      borderBottomLeftRadius: oItem.main.wrapperBBR + 'px',
      backgroundColor: oItem.main.wrapperBgColor||'transparent',
      backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none',
    }">
      <div class="titleWrapper" :style="{
          borderTopLeftRadius: oItem.main.moduleBTR + 'px',
          borderTopRightRadius: oItem.main.moduleBTR + 'px',
          borderBottomRightRadius: oItem.main.moduleBBR + 'px',
          borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
          backgroundColor: oItem.main.bgColor||'transparent',
          backgroundImage: oItem.main.bgImg?('url(\''+oItem.main.bgImg+'\')'):'none',
          justifyContent: oItem.main.titleTextPosition,
        }">
        <div class="left">
          <p class="title">
            <i :class="oItem.main.titleIcon" v-if="
                oItem.main.titleIcon != '' &&
                oItem.main.titleIcon.indexOf('icon-') > -1
              " :style="{ color: oItem.main.titleIconColor||'transparent' }"></i>
            <img v-if="
                oItem.main.titleIcon &&
                oItem.main.titleIcon.indexOf('icon-') == -1
              " :src="oItem.main.titleIcon" alt="" style="width: 16px; height: 16px; margin-right: 5px" />
            <span :style="{
                fontSize: oItem.main.titleFontSize + 'px',
                fontWeight: oItem.main.titleFontWeight,
                color: oItem.main.titleFontColor||'transparent',
              }">{{ oItem.main.titleText }}</span>
          </p>
          <p class="subTitle" v-if="oItem.main.displaySubTitle">
            <i :class="oItem.main.subTitleIcon" v-if="
                oItem.main.subTitleIcon != '' &&
                oItem.main.subTitleIcon.indexOf('icon-') > -1
              " :style="{ color: oItem.main.subTitleIconColor||'transparent' }"></i>
            <img v-if="
                oItem.main.subTitleIcon &&
                oItem.main.subTitleIcon.indexOf('icon-') == -1
              " :src="oItem.main.subTitleIcon" alt="" style="width: 16px; height: 16px; margin-right: 5px" />
            <span :style="{
                fontSize: oItem.main.subTitleFontSize + 'px',
                fontWeight: oItem.main.subTitleFontWeight,
                color: oItem.main.subTitleFontColor||'transparent',
              }">{{ oItem.main.subTitleText }}</span>
          </p>
        </div>
        <div class="right" v-if="oItem.main.displayMore">
          <span :style="{ color: oItem.main.moreFontColor||'transparent' }">{{
            oItem.main.moreText
          }}</span>
          <i :class="oItem.main.moreIcon" :style="{ color: oItem.main.moreIconColor||'transparent' }"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Bus from "@/utils/bus";
  import {
    mapState
  } from "vuex";
  export default {
    name: "main_titleComponent",
    data() {
      return {
        oItem: null,
        rightIndex: 0,
        catalogIndex: 0,
      };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
      this.$nextTick(() => {
        this.init();
      });
      const emitName = this.ename + this.id;
      Bus.$off(emitName);
      Bus.$on(emitName, (control) => {
        //console.log("titleComponent被通知更新");
        this.oItem = JSON.parse(control);
      });
    },
    methods: {
      //页面初始化
      init() {
        this.oItem = null;
        this.oItem = JSON.parse(JSON.stringify(this.item));
      },
    },
    computed: mapState(["decorate"]),
    watch: {},
  };
</script>
<style scoped>
  .titleComponent {
    width: 100%;
    display: flex;box-sizing: border-box;
  }
  .content{
    width: 100%;background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
  }
  .titleComponent .titleWrapper {
    width: 100%;
    min-height: 40px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
  }

  .titleComponent .titleWrapper .left {
    display: flex;
    flex-direction: column;
  }

  .titleComponent .titleWrapper .left .title {
    display: flex;
    align-items: center;
  }

  .titleComponent .titleWrapper .left .title i {
    margin-right: 3px;
  }

  .titleComponent .titleWrapper .left .subTitle {
    display: flex;
    align-items: center;
  }

  .titleComponent .titleWrapper .left .subTitle i {
    margin-right: 3px;
  }

  .titleComponent .titleWrapper .right {
    display: flex;
    font-size: 12px;
    position: absolute;
    right: 10px;
    z-index: 2;
  }

  .titleComponent .titleWrapper .right i {
    transform: scale(0.8);
  }
</style>
